<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div class="form-input-area" style="positon: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="flx-row-s-c div-line">
          <div class="long-name">用户ID</div>
          <span class="c-black f-14">{{ $store.state.user.account }}</span>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">真实姓名</div>
          <span class="c-black f-14" v-if="$store.state.user.username">{{
            $store.state.user.username
          }}</span>
          <span class="c-black f-14" v-else
            >未实名认证，请<router-link
              to="/user/certification"
              class="b-form-font-button"
              >前往认证</router-link
            ></span
          >
          <div class="c-black f-14" style="margin: 0 15px 0 32px">昵称:</div>
          <Input
            v-model.trim="nickname"
            placeholder="请输入昵称"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">性别</div>
          <RadioGroup v-model="sex">
            <Radio class="radio-mg-r-20" :label="0"
              ><span class="f-14 c-black">男</span></Radio
            >
            <Radio class="radio-mg-r-20" :label="1"
              ><span class="f-14 c-black">女</span></Radio
            >
          </RadioGroup>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">出生日期</div>
          <DatePicker
            :editable="false"
            :value="birthday"
            type="date"
            placeholder="请选择生日"
            style="width: 200px"
            @on-change="birthdayChange"
          ></DatePicker>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">联系电话</div>
          <span class="c-black f-14">{{ $store.state.user.mobile }}</span>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">Email</div>
          <span class="c-black f-14">{{ $store.state.user.email }}</span>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">联系QQ</div>
          <Input
            v-model.trim="qq"
            placeholder="请输入联系QQ"
            maxlength="30"
            style="width: 160px"
          />
          <div class="c-black f-14" style="margin: 0 15px 0 32px">微信号:</div>
          <Input
            v-model.trim="wechatNum"
            placeholder="请输入微信号"
            maxlength="30"
            style="width: 160px"
          />
          <div
            class="form-line-button-size user-normal-button"
            style="margin-left: 20px"
            v-if="wechatUrl"
            @click="imageModalShow = true"
          >
            查看微信图片
          </div>
          <image-modal
            :show.sync="imageModalShow"
            imgAlt="微信图片"
            :imgSrc="wechatUrl"
          ></image-modal>
          <Upload
            style="margin-left: 20px"
            type="drag"
            :before-upload="handleBeforeUpload"
            :show-upload-list="false"
            action="/"
          >
            <div class="form-line-button-size user-normal-button">
              添加微信图片
            </div>
          </Upload>
        </div>
        <div class="flx-row-s-c div-line long-name-nece">
          <div class="long-name">国家/地区</div>
          <Select v-model="country" style="width: 200px; margin-right: 10px">
            <Option
              v-for="(item, index) in countryList"
              :key="'p' + index"
              :value="item.countryNameCn"
              >{{ item.countryNameCn }}</Option
            >
          </Select>
          <div v-if="country == '中国'">
            <Select
              v-model="province"
              style="width: 200px; margin-right: 10px"
              @on-change="changeProvince"
            >
              <Option
                v-for="(item, index) in addressList"
                :value="item.value"
                :key="'p' + index"
                >{{ item.label }}</Option
              >
            </Select>
            <Select
              v-if="province != null && province != ''"
              v-model="city"
              style="width: 150px; margin-right: 10px"
            >
              <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </div>
          <div v-if="country != '' && country != '中国'">
            <Input
              v-model.trim="provinceW"
              placeholder="请输入"
              maxlength="30"
              style="width: 200px"
            />
          </div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">联系地址</div>
          <Input
            v-model.trim="address"
            placeholder="请输入联系地址"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">公司名称</div>
          <Input
            v-model.trim="company"
            placeholder="请输入公司名称"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">邮政编码</div>
          <Input
            v-model.trim="postcode"
            placeholder="请输入邮政编码"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">传真号码</div>
          <Input
            v-model.trim="fax"
            placeholder="请输入传真号码"
            maxlength="30"
            style="width: 200px"
          />
        </div>
        <div
          class="user-strong-button submit-button-style pub-m-l-105"
          @click="submit"
        >
          确认
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { editUserInfo, uploadImg, getAddress } from "@/api/user";
import { mapActions } from "vuex";
export default {
  name: "VipPersonaldata",
  components: {
    imageModal: () => import("_c/modal/imageModal/imageModal.vue"),
  },
  data() {
    return {
      loading: false,
      breadCrumb: [{name: "管理中心"},{ name: "账户管理" }, { name: "个人资料" }],
      tablist: [
        {
          name: "个人资料",
          to: "/user/personaldata",
        },
      ],

      // 表单数据
      nickname: "",
      sex: "",
      birthday: "",
      qq: "",
      wechatUrl: "",
      wechatNum: "",
      addressList: [],
      province: "",
      provinceW: "",
      country: "",
      countryList: [],
      cityList: [],
      city: "",
      address: "",
      company: "",
      postcode: "",
      fax: "",
      file: null,

      // 弹框
      imageModalShow: false,
    };
  },
  watch: {
    "$store.state.user.getBaseInfo": {
      handler(newValue) {
        if (newValue) {
          this.getUserInfo();
        }
      },
    },
  },
  created() {
    this.getAddressList();
    if (this.$store.state.user.getBaseInfo) {
      this.getUserInfo();
    }
  },
  methods: {
    ...mapActions(["getUserData"]),
    // 获取省市区
    async getAddressList() {
      const { code, data } = await getAddress();
      if (code === 200 && data) {
        // 国家
        this.countryList = data.dictCountryList;
        // 地区
        this.addressList = data.dictVOList;
        if (this.province) {
          for (const i in this.addressList) {
            if (this.addressList[i].value === this.province) {
              if (
                this.addressList[i].value === "天津市" ||
                this.addressList[i].value === "北京市" ||
                this.addressList[i].value === "重庆市" ||
                this.addressList[i].value === "上海市"
              ) {
                this.cityList = this.addressList[i].children[0].children.concat(
                  this.addressList[i].children[1].children
                );
              } else {
                this.cityList = this.addressList[i].children;
              }
            }
          }
        }
      }
    },
    changeProvince() {
      for (const i in this.addressList) {
        if (this.addressList[i].value === this.province) {
          if (
            this.addressList[i].value === "天津市" ||
            this.addressList[i].value === "北京市" ||
            this.addressList[i].value === "重庆市" ||
            this.addressList[i].value === "上海市"
          ) {
            this.cityList = this.addressList[i].children[0].children.concat(
              this.addressList[i].children[1].children
            );
          } else {
            this.cityList = this.addressList[i].children;
          }
        }
      }
      this.city = "";
    },
    getUserInfo() {
      this.nickname = this.$store.state.user.nickname;
      this.sex = this.$store.state.user.sex;
      this.birthday = this.$store.state.user.birthday;
      this.qq = this.$store.state.user.qq;
      this.wechatNum = this.$store.state.user.wechatNum;

      if (this.$store.state.user.province && this.$store.state.user.city) {
        this.country = "中国";
      } else {
        this.country = this.$store.state.user.country;
      }
      if (this.country == "中国") {
        this.province = this.$store.state.user.province;
        this.city = this.$store.state.user.city;
      } else {
        this.provinceW = this.$store.state.user.province;
      }

      this.address = this.$store.state.user.address;
      this.company = this.$store.state.user.company;
      this.postcode = this.$store.state.user.postcode;
      this.fax = this.$store.state.user.fax;
      this.wechatUrl = this.$store.state.user.wechatUrl;
      if (this.province) {
        this.changeProvince();
        this.city = this.$store.state.user.city;
      }
    },
    // 修改个人资料
    async submit() {
      if (this.nickname == null || this.nickname == "") {
        this.$Message.warning("请输入昵称！");
        return;
      }
      if (this.country == "中国") {
        if (!this.province || !this.city || !this.country) {
          this.$Message.warning("请选择国家/地区！");
          return;
        }
      } else {
        if (!this.provinceW || !this.country) {
          this.$Message.warning("请选择国家/地区！");
          return;
        }
      }

      let data = {};
      if (this.nickname != this.$store.state.user.nickname) {
        data.nickname = this.nickname;
      }
      if (this.sex != this.$store.state.user.sex) {
        data.sex = this.sex;
      }
      if (this.birthday != this.$store.state.user.birthday) {
        data.birthday = this.birthday;
      }
      if (this.qq != this.$store.state.user.qq) {
        data.qq = this.qq;
      }
      if (this.wechatNum != this.$store.state.user.wechatNum) {
        data.wechatNum = this.wechatNum;
      }
      if (this.country != this.$store.state.user.country) {
        data.country = this.country;
      }
      if (this.country == "中国") {
        if (this.province != this.$store.state.user.province) {
          data.province = this.province;
        }
        if (this.city != this.$store.state.user.city) {
          data.city = this.city;
        }
      } else {
        if (this.provinceW != this.$store.state.user.province) {
          data.province = this.provinceW;
        }
        data.city = "";
      }
      if (this.address != this.$store.state.user.address) {
        data.address = this.address;
      }

      if (this.company != this.$store.state.user.company) {
        data.company = this.company;
      }
      if (this.postcode != this.$store.state.user.postcode) {
        data.postcode = this.postcode;
      }
      if (this.fax != this.$store.state.user.fax) {
        data.fax = this.fax;
      }
      this.loading = true;
      if (
        this.wechatUrl != this.$store.state.user.wechatUrl &&
        this.file != null
      ) {
        let formData = new FormData();
        formData.append("file", this.file);
        let res = await uploadImg(formData);
        if (res.code == 200) {
          this.wechatUrl = res.data.url;
          data.wechatImg = res.data.name;
        } else {
          this.loading = false;
          return;
        }
      }
      let res = await editUserInfo(data);
      if (res.code == 200) {
        this.$Message.success("修改成功");
        this.getUserData();
      }
      this.loading = false;
    },
    // 生日改变
    birthdayChange(date) {
      this.birthday = date;
    },
    // 选择图片后处理
    handleBeforeUpload: function (file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg"
      ) {
        this.$Message.warning("图片要求上传jpg或者png格式或者jpeg格式");
        return false;
      }
      this.file = file;
      this.wechatUrl = window.URL.createObjectURL(file);
      this.$Message.success("微信图片添加成功，记得点击确认进行保存哦！");
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.long-name {
  min-width: 75px;
  font-size: 14px;
}
::v-deep .ivu-upload-drag {
  border: none;
}
</style>
